<template>
	<view class="page">
		<!-- 顶部整体容器 -->
		<view class="header-container">
			<!-- 粉丝统计 -->
			<view class="stats-banner">
				<view class="stats-item">
					<text class="stats-number">{{ fansList.length }}</text>
					<text class="stats-label">总粉丝</text>
				</view>
				<view class="stats-divider"></view>
				<view class="stats-item">
					<text class="stats-number">{{ todayNewFans }}</text>
					<text class="stats-label">今日新增</text>
				</view>
				<view class="stats-divider"></view>
				<view class="stats-item">
					<text class="stats-number">{{ mutualFollowCount }}</text>
					<text class="stats-label">互相关注</text>
				</view>
			</view>

			<!-- 搜索栏 -->
			<view class="search-container">
				<view class="search-box">
					<image src="/static/svg/search.svg" class="search-icon" />
					<input 
						class="search-input" 
						placeholder="搜索粉丝..." 
						v-model="searchKeyword"
						@input="onSearch"
					/>
				</view>
			</view>
		</view>

		<!-- 粉丝列表 -->
		<view class="fans-list">
			<view 
				class="fan-item" 
				v-for="fan in filteredFansList" 
				:key="fan.id"
				@click="viewProfile(fan)"
			>
				<view class="fan-avatar">
					<image :src="fan.avatar" class="avatar-img" />
					<view v-if="fan.isOnline" class="online-dot"></view>
				</view>
				<view class="fan-info">
					<view class="fan-main">
						<text class="fan-name">{{ fan.name }}</text>
						<view v-if="fan.isMutualFollow" class="mutual-badge">
							<text class="mutual-text">互关</text>
						</view>
						<view v-if="fan.isVip" class="vip-badge">
							<text class="vip-text">VIP</text>
						</view>
					</view>
					<text class="fan-desc">{{ fan.description }}</text>
					<view class="fan-meta">
						<text class="follow-time">{{ fan.followTime }}</text>
						<text class="fan-stats">{{ fan.postsCount }}条动态</text>
					</view>
				</view>
				<view class="fan-actions">
					<button 
						:class="['follow-btn', fan.isFollowBack ? 'following' : 'follow']"
						@click.stop="toggleFollow(fan)"
					>
						{{ fan.isFollowBack ? '已关注' : '回关' }}
					</button>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="filteredFansList.length === 0 && !isLoading" class="empty-state">
			<image src="/static/svg/user.svg" class="empty-icon" />
			<text class="empty-title">{{ searchKeyword ? '暂无搜索结果' : '暂无粉丝' }}</text>
			<text class="empty-desc">{{ searchKeyword ? '试试其他关键词吧' : '快去分享精彩内容吸引粉丝吧' }}</text>
		</view>

		<!-- 加载更多 -->
		<view v-if="hasMore" class="load-more" @click="loadMore">
			<text class="load-more-text">{{ isLoading ? '加载中...' : '加载更多' }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 响应式数据
const searchKeyword = ref('');
const isLoading = ref(false);
const hasMore = ref(true);
const todayNewFans = ref(12);
const mutualFollowCount = ref(89);

// 粉丝列表数据
const fansList = ref([
	{
		id: 1,
		name: '小红同学',
		avatar: '/static/svg/avatar-female.svg',
		description: '热爱摄影的文艺青年 📸',
		followTime: '2天前关注',
		postsCount: 128,
		isFollowBack: false,
		isMutualFollow: false,
		isVip: true,
		isOnline: true
	},
	{
		id: 2,
		name: '张小明',
		avatar: '/static/svg/avatar-male.svg',
		description: '喜欢运动和旅行的阳光男孩 ⚽',
		followTime: '1周前关注',
		postsCount: 89,
		isFollowBack: true,
		isMutualFollow: true,
		isVip: false,
		isOnline: false
	},
	{
		id: 3,
		name: '李美美',
		avatar: '/static/svg/avatar-female.svg',
		description: '美食博主，分享生活中的美好 🍰',
		followTime: '3天前关注',
		postsCount: 256,
		isFollowBack: false,
		isMutualFollow: false,
		isVip: false,
		isOnline: true
	},
	{
		id: 4,
		name: '王大力',
		avatar: '/static/svg/avatar-male.svg',
		description: '健身达人，每天都要撸铁 💪',
		followTime: '5天前关注',
		postsCount: 67,
		isFollowBack: true,
		isMutualFollow: true,
		isVip: true,
		isOnline: false
	},
	{
		id: 5,
		name: '陈小雨',
		avatar: '/static/svg/avatar-female.svg',
		description: '设计师，追求极简美学 ✨',
		followTime: '1天前关注',
		postsCount: 145,
		isFollowBack: false,
		isMutualFollow: false,
		isVip: false,
		isOnline: true
	}
]);

// 搜索过滤后的粉丝列表
const filteredFansList = computed(() => {
	if (!searchKeyword.value) {
		return fansList.value;
	}
	return fansList.value.filter(fan => 
		fan.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
		fan.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
	);
});

// 页面方法
const onSearch = () => {
	// 搜索逻辑已通过 computed 实现
};

const viewProfile = (fan) => {
	uni.showToast({
		title: `查看 ${fan.name} 的资料`,
		icon: 'none'
	});
};

const toggleFollow = (fan) => {
	fan.isFollowBack = !fan.isFollowBack;
	fan.isMutualFollow = fan.isFollowBack;
	
	uni.showToast({
		title: fan.isFollowBack ? '已关注' : '取消关注',
		icon: 'success'
	});
};

const loadMore = () => {
	if (isLoading.value) return;
	
	isLoading.value = true;
	setTimeout(() => {
		isLoading.value = false;
		hasMore.value = false;
		uni.showToast({
			title: '已加载全部粉丝',
			icon: 'none'
		});
	}, 1000);
};

onMounted(() => {
	// 页面加载时的初始化逻辑
});
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
}

/* 顶部整体容器 */
.header-container {
	background: white;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

/* 统计横幅 */
.stats-banner {
	display: flex;
	padding: 24rpx 0;
	color: #333;
	border-bottom: 2rpx solid #f0f0f0;
}

/* 搜索栏 */
.search-container {
	padding: 30rpx 40rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.search-box {
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 50rpx;
	padding: 0 30rpx;
	height: 80rpx;
}

.search-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 20rpx;
	filter: opacity(0.5);
}

.search-input {
	flex: 1;
	font-size: 32rpx;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
}

.stats-item {
	flex: 1;
	text-align: center;
}

.stats-number {
	font-size: 44rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 6rpx;
	color: #667eea;
}

.stats-label {
	font-size: 26rpx;
	color: #666;
	display: block;
}

.stats-divider {
	width: 2rpx;
	height: 64rpx;
	background: #e0e0e0;
	margin: auto 0;
}

/* 粉丝列表 */
.fans-list {
	padding: 0 40rpx;
	padding-top: 20rpx;
	box-sizing: border-box;
}

.fan-item {
	background: white;
	border-radius: 32rpx;
	padding: 40rpx;
	margin-bottom: 24rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	transition: transform 0.2s;
}

.fan-item:active {
	transform: scale(0.98);
}

.fan-avatar {
	position: relative;
	margin-right: 30rpx;
}

.avatar-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	background: #f0f0f0;
}

.online-dot {
	position: absolute;
	bottom: 4rpx;
	right: 4rpx;
	width: 24rpx;
	height: 24rpx;
	background: #4CAF50;
	border-radius: 12rpx;
	border: 4rpx solid white;
}

.fan-info {
	flex: 1;
}

.fan-main {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.fan-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-right: 16rpx;
}

.mutual-badge {
	background: #667eea;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	margin-right: 10rpx;
}

.mutual-text {
	font-size: 20rpx;
	color: white;
}

.vip-badge {
	background: linear-gradient(45deg, #FFD700, #FFA500);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.vip-text {
	font-size: 20rpx;
	color: white;
	font-weight: bold;
}

.fan-desc {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 16rpx;
	line-height: 1.4;
}

.fan-meta {
	display: flex;
	align-items: center;
}

.follow-time {
	font-size: 24rpx;
	color: #999;
	margin-right: 24rpx;
}

.fan-stats {
	font-size: 24rpx;
	color: #999;
}

.fan-actions {
	margin-left: 30rpx;
}

.follow-btn {
	padding: 8rpx 16rpx;
	border-radius: 24rpx;
	border: none;
	font-size: 22rpx;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

.follow {
	background: #667eea;
	color: white;
}

.follow:active {
	background: #5a6fd8;
}

.following {
	background: #f0f0f0;
	color: #666;
	border: 2rpx solid #e0e0e0;
}

.following:active {
	background: #e8e8e8;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 120rpx 40rpx;
}

.empty-icon {
	width: 160rpx;
	height: 160rpx;
	opacity: 0.3;
	margin-bottom: 40rpx;
}

.empty-title {
	font-size: 36rpx;
	color: #333;
	font-weight: 500;
	display: block;
	margin-bottom: 20rpx;
}

.empty-desc {
	font-size: 28rpx;
	color: #999;
	display: block;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: 40rpx;
}

.load-more-text {
	font-size: 28rpx;
	color: #667eea;
}
</style> 